<template>
  <div >
		<h1>找回密码</h1>
		<el-form :model="wyform" label-width="70px">
			<el-form-item label="登录名">
				<el-input v-model="wyform.username" placeholder="请输入手机号/电子邮件"></el-input>
			</el-form-item>
			<el-form-item label="验证码">
				<el-space>
					<el-input v-model="wyform.code" placeholder="请输入验证码"></el-input>
					<el-button type="primary">发送验证码</el-button>
				</el-space>
			</el-form-item>
			<el-form-item label="登录密码">
				<el-input v-model="wyform.password" placeholder="请输入登录密码" show-password></el-input>
			</el-form-item>
			<el-form-item label-width="0px">
				<div style="width: 100%; display: flex; justify-content: space-between;">
					<el-link type="primary" @click="reback">返回登录</el-link>
				</div>
			</el-form-item>
			<el-form-item label-width="0px">
				<el-button style="width: 100%;" type="primary">确认</el-button>
			</el-form-item>
		</el-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const emits = defineEmits(['update:r'])
const wyform = reactive({
	username: '',
	code: '',
	password: ''
})
function reback () {
	emits('update:r', 0)
}
</script>

<style scoped lang="scss">
h1 {
	text-align: center;
}
.el-form {
	margin-top: 25px;
	margin-right: 50px;
	margin-left: 50px;
}
</style>